<template>
  <div class="home">
    <div class="top-bar">
      <div class="item" style="margin-right: auto">
        <div class="label">当前日期时间</div>
        <div class="value"><value :model="data" prop="currentDate" type="datetime"/></div>
      </div>
      <div class="item">
        <div class="label">今日订单数</div>
        <div class="value"><value :model="data" prop="dayOrderCount"/></div>
      </div>
      <div class="l"></div>
      <div class="item">
        <div class="label">当月订单数</div>
        <div class="value"><value :model="data" prop="monthOrderCount"/></div>
      </div>
      <div class="l"></div>
      <div class="item">
        <div class="label">上月订单数</div>
        <div class="value"><value :model="data" prop="preMonthOrderCount"/></div>
      </div>
    </div>
    <div class="container">
      <div class="flow">
        <div class="scroll">
          <div class="steps-wrapper">
            <div class="steps">
              <img class="steps-bg" src="/img/flow.svg">
              <div class="step create" @click="$router.push('/orderAdd')"></div>
                              <div class="step pick" @click="$router.push('/pick/index')"><i class="badge"><value :model="data" prop="pickCount"/></i></div>
                              <div class="step verify" @click="$router.push('/pick/index')"><i class="badge"><value :model="data" prop="verifyCount"/></i></div>
                              <div class="step transport" @click="$router.push('/transport/assign')"><i class="badge"><value :model="data" prop="transportCount"/></i></div>
                              <div class="step logistics" @click="$router.push('/logistics/index')"><i class="badge"><value :model="data" prop="logisticsCount"/></i></div>
                              <div class="step sign" @click="$router.push('/sign/wait')"><i class="badge"><value :model="data" prop="signCount"/></i></div>
                              <div class="step take" @click="$router.push('/sign/wait')"><i class="badge"><value :model="data" prop="takeCount"/></i></div>
                              <div class="step finish" @click="$router.push('/sign/wait')"><i class="badge"><value :model="data" prop="finishCount"/></i></div>
              <div class="step finance" @click="$router.push('/waitCollection')"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="notice">
        <div class="title">系统公告</div>
        <div>
<!--                    <div style="margin: 10px 20px;font-size: 12px;border-bottom: 1px #eee solid;padding-bottom: 10px">-->
<!--                      <div style="height:30px;line-height: 30px;">-->
<!--                        <span style="float: left">D21207-1-1</span>-->
<!--                        <span style="float: right">2021-10-28 10:10:20</span>-->
<!--                      </div>-->
<!--                      <div style="height:30px;line-height: 30px;">-->
<!--                       客户 宝马  已指派验车-->
<!--                      </div>-->
<!--                    </div>-->
          <div class="empty">暂无数据</div>
        </div>
      </div>
    </div>
    <!--    <div class="bottom-bar">汽车物流综合管理系统　2021　版本　2.0.1　demo</div>-->
  </div>
</template>
<script>
import value from '@/components/AdValue'
import { get } from '@/api/home'

export default {
  components: { value },
  data() {
    return {
      data: {}
    }
  },
  created() {
    get().then(res => this.data = res.data)
  }
}
</script>

<style lang="less" scoped>
.home { display: flex; flex: 1; flex-direction: column; background: #eee;width: 100%;height: 100%;}
.top-bar { display: flex; margin-top: 2px; padding: 10px 24px; background: #fff;
  .l { width: 1px; margin: 10px 32px; background: #ebebeb; }
  .item {
    .label { margin-bottom: 8px; font-size: 14px; color: #9a9a9a; }
    .value { font-size: 20px; }
    &:not(:first-child) { text-align: right; }
  }
}
.container { display: flex; flex: 1; margin: 24px;
  .flow { position: relative; display: flex; flex: 1; margin-right: 24px; flex-direction: column; align-items: center; justify-content: center; background: #fff;padding: 80px 0;
    //::v-deep .el-scrollbar__view { display: flex; align-items: center; justify-content: center; }
    .scroll { flex-grow: 1; height: 100%; overflow-y: auto; }
    .steps-wrapper { display: flex; min-height: 100%; align-items: center; justify-content: center;
      .steps { position: relative; width: 90%;
        .steps-bg { display: block; width: 100%; }
        .step { position: absolute; cursor: pointer;
          .badge { position: absolute; top: -10px; left: -10px; padding: 0 4px; font-size: 12px; font-style: normal; background: #ff4d4f; color: #fff; border-radius: 10px; }}
        .step.create { top: 0; width: 4.8%; height: 12.5%; }
        .step.pick { top: 29.5%; width: 4.8%; height: 12.7%; }
        .step.verify { top: 29.5%; left: 15.2%; width: 4.8%; height: 12.7%; }
        .step.transport { top: 29.5%; left: 33%; width: 7.2%; height: 12.7%; }
        .step.logistics { top: 29.5%; left: 52%; width: 6%; height: 12.7%; }
        .step.sign { top: 29.5%; left: 72%; width: 4.8%; height: 12.7%; }
        .step.take { top: 55.5%; left: 80.8%; width: 4.8%; height: 12.7%; }
        .step.finish { top: 84.4%; left: 80.8%; width: 4.8%; height: 12.7%; }
        .step.finance { top: 84.4%; left: 95%; width: 4.9%; height: 12.7%; }
      }
    }
  }
  .notice { width: 20%; background: #fff;
    .empty { line-height: 56px; text-align: center; font-size: 12px; color: #aaa; }
    .title { padding: 0 18px; line-height: 46px; font-size: 14px; font-weight: bold;
      &:after { content: ''; display: block; height: 1px; background: #ececec; }}}
}
.bottom-bar { height: 50px; line-height: 50px; text-align: center; font-size: 14px; color: #9a9a9a; }
</style>
